<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风向分布</title>
    <script src="../echarts.min.js"></script>
    <script src="../lodash.min.js"></script>
    <style>
        .flex{
            display: flex;
        }
    </style>
</head>
<body style="background:#0B0D39">
    <!-- 为ECharts准备一个具备大小（宽高）的DOM -->
    <div id="main1" style="width: 100%; height: 500px"></div>
    <!-- <div id="mainr" style="width: 50%; height: 500px"></div> -->
    

    <script>
        // 指定图标的配置项和数据
        var option = {
        　　title: {
            　　text: ''
            },
            polar: {
            // 　　center: ['50%', '50%']
            },
            tooltip: {
            　　trigger: 'axis',
            　　axisPointer: {
            　　　　type: 'cross'
            　　}
            },
            angleAxis: {//极坐标系的角度轴
            　　type: 'value',
            　　startAngle: 90,
            　　splitNumber: 30, //坐标轴分割段数
            // 　　clockwise: clockwise, //是否逆时针
            　　axisLine: { //坐标轴轴线设置
            　　　　lineStyle: {
            　　　　　　color: '#ccc',
            　　　　}
            　　},
            　　axisTick: { //坐标轴刻度设置
            　　　　show: false
            　　},
            　　splitLine: { //分割线设置
            　　　　show: false,
            　　},
            　　axisLabel: { //刻度标签设置
            　　　　textStyle: {
            　　　　　　color: '#333'
            　　　　}
            　　}
            },
            radiusAxis: {//极坐标系的径向轴。
            　　min: 0,
                type: 'value',
            　　axisLine: { //坐标轴轴线设置
            　　　　show: false,
            　　　　// lineStyle: {
            　　　　　　// color: "#ccc"
            　　　　// }
            　　},
            　　axisTick: { //坐标轴刻度设置
            　　　　show: false
            　　},
            　　axisLabel: { //刻度标签设置
            　　　　margin: 0, //刻度与坐标轴之间的距离
            　　　　textStyle: {
            　　　　　　color: '#fff'
            　　　　}
            　　}
            },
            series: [{
            　　coordinateSystem: 'polar',
            　　name: 'line',
            　　type: 'bar',
            　　showSymbol: false,
            　　smooth: true,
            　　data: [2, 2, 5, 4, 3, 5, 1, 6, 7, 8, 9, 12], //红线数据参数
            　　lineStyle: {
            　　　　normal: {
            　　　　　　color: '#f00'
            　　　　}
            　　}
            }],
        　　animationDuration: 2000
        };

        // 基于准备好的DOM，初始化echarts实例
        var chart1 = echarts.init(document.getElementById('main1'));


        // 使用刚指定的配置项和数据显示图表
        chart1.setOption(option)
    </script>
</body>
</html>